<template>
  <div>
    <!-- 添加品牌 -->
    <el-button
      type="primary"
      @click="handleAdd"
      icon="el-icon-plus"
    >
      添 <i class="el-icon-picture"></i> 加</el-button>
    <!-- dialog对话框 -->
    <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
      <el-form
        :model="tmForm"
        :rules="rules"
        label-position="left"
        status-iconn
        ref="ruleForm"
      >
        <el-form-item
          label="品牌名称"
          :label-width="formLabelWidth"
          prop="tmName"
        >
          <el-input v-model="tmForm.tmName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="品牌LOGO" :label-width="formLabelWidth" prop="imageUrl">
          <!-- 上传组件 -->
          <el-upload
            class="avatar-uploader"
            action="/dev-api/admin/product/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="tmForm.imageUrl" :src="tmForm.imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" >取 消</el-button>
        <el-button type="primary"  @click="submitForm()">确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 表格部分 -->
    <el-table  border stripe style="margin:20px 0px" :data="trademarkList">
      <el-table-column label="序号" width="100px" type="index" align="center"  ></el-table-column>
      <el-table-column label="品牌名称" prop="tmName"></el-table-column>
      <el-table-column label="品牌LOGO">
        <template slot-scope="{row,$index}">
          <img :src="row.logoUrl" width="100px" height="100px">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row,$inde}">
          <el-button type="warning" size="mini" icon="el-icon-edit" @click="updateTrademark(row)">修改</el-button>
          <el-popconfirm
            confirm-button-text='确认'
            cancel-button-text='考虑考虑'
            icon="el-icon-info"
            icon-color="red"
            title="确定删除当前品牌么？"
            style="margin-left:20px;"
            @onConfirm="handleDelete(row)"
          >
          <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete"  >删除</el-button>

          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器部分 -->

      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="currentPage"
        :page-sizes="[3, 5, 7, 10]"
        :page-size="pageSize"
        layout="  prev, pager, next, jumper,->, sizes,total"
        :total="totalNum" 
        background
        prev-text="上一页"
        next-text="下一页"
        align="center"
        :pager-count="7">
      </el-pagination>
      
   
    
    



  </div>
</template>

<script>
export default {
  name: "Trademark",
  data() {
    // 表单校验规则  校验品牌名
    let validateTmform = (rule, value, callback) => {
      let result = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value);
      // console.log(result);
      if (result) {
        callback();
      } else {
        callback(new Error("输入的内容必须是手机号哦"));
      }
    };
    // 校验至少上传一张图片
     const validateimageUrl = (reule,value,callback)=>{
      // console.log(value)
      if(value){
        callback()
      }else{
        callback(new Error('至少要上传一张图片哦'))
      }
     }
    return {
      dialogTableVisible: false, //控制 对话框的显示与隐藏
      dialogFormVisible: false,
      pageSize:3,              //每页默认显示3条数据
      totalNum:50,              //分页器一共有多少条数据
      currentPage:1,            //分页器当前是在哪一页
      trademarkList:[],         //品牌列表数据
      page:2,                   //当前是第几页的数据
      limit:3,                  //每页展示几条数据

      // 表单校验规则
      rules: {
        tmName: [
          { required: true, validator: validateTmform, trigger: "blur" },
        ],
        imageUrl:[{required:true,validator:validateimageUrl}]
      },
      // 手机表单的数据
      tmForm: {
        tmid:'',        //当前表格项的id
        tmName: "",
        imageUrl: '',   //上传图片
      },
      formLabelWidth: "100px", //form  标题的宽度
    };
  },
  methods: {
    // 文件上传成功
      handleAvatarSuccess(res, file) {
        // console.log(res,file)
        this.tmForm.imageUrl = res.data;
      },
      // 上传文件之前
      beforeAvatarUpload(file) {
        // console.log(file)
        const isJPG = file.type === 'image/jpeg'  || 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 4;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 4MB!');
        }
        return isJPG && isLt2M;
      },
      // 点击提交的时候 验证所有表单的情况
       submitForm(formName) {
       
        this.$refs.ruleForm.validate((success) => {
          if(success){
            // 表单校验成功
            // 发请求 添加数据  或者修改数据
            this.addTrademark()
            // 添加成功之后 再捞一下 最新的列表数据
            this.getListToal()
            // 关闭dialog
            this.dialogFormVisible = false

          }else{
            // 表单校验失败
            return false
          }
        
         
        });
      },
      // 一页多少条数据改变的时候触发
      sizeChange(limit){
        // 回调是每页的条数
        this.limit = limit
        // 再次获取品牌列表数据
        this.getTrademarkList()
      },
      // 当前页改变的回调
      currentChange(page){
        this.page = page
         // 再次获取品牌列表数据
        this.getTrademarkList()
      },
      // 获取品牌列表的数据
     async getTrademarkList(){
      const {page,limit} = this
        const result = await this.$ajax.trademark.reqGetTrademarkList(page,limit)
        console.log(result)
        if(result.code === 200){
          this.trademarkList = result.data.records
         
        }
      },
      // 获取列表中一共有多少条数据
     async getListToal(){
        const result = await this.$ajax.trademark.reqGetTrademarkListTotal()
        let length = result.data.length
        this.totalNum = length
      },
      // 添加数据 或者修改数据
     async  addTrademark(){
        const data = {
           id:this.tmForm.tmid,
          "logoUrl":this.tmForm.imageUrl,
          "tmName": this.tmForm.tmName
        }
        const result = await this.$ajax.trademark.reqAddOrUpdateTrademark(data)
        if(result.code == 200){
          if(data.id){
            // 有id 是修改
             this.$message.success('修改品牌成功')
            //  更新获取当前这页的数据
            this.getTrademarkList()
            // 清空一下默认的数据
            this.tmForm.tmName = ''
            this.tmForm.imageUrl = ''
            
          }else{
             this.$message.success('添加品牌成功')
            //  获取一下最新的数据
             this.getListToal()
               // 清空一下默认的数据
            this.tmForm.tmName = ''
            this.tmForm.imageUrl = ''

          }
            
        }
      },
      // 点击修改数据 弹出dialog
    async updateTrademark(row){
      this.dialogFormVisible = true
      this.tmForm.tmName = row.tmName
      this.tmForm.imageUrl = row.logoUrl
      this.tmForm.tmid = row.id
        // const data = {
        //    "id": row.id,
        //   "logoUrl": row.logoUrl,
        //   "tmName":row.tmName
        // }
        // const result = await this.$ajax.reqUpdateTradeMark(data)
        // if(result.code == 200){
        //   this.$message.success('修改数据成功')
        // }
      },
      // 点击添加按钮的时候
      handleAdd(){
        this.dialogFormVisible = true
       this.$nextTick(()=>{
         // 清除一下表单
        this.$refs.ruleForm.resetFields()
       })

         // 清空一下默认的数据
        this.tmForm.tmName = ''
         this.tmForm.imageUrl = ''
      },
      // 确认删除当前品牌数据
     async  handleDelete(row){
     
        let id = row.id
      // 确认删除的话  发请求  请求成功的时候 提示成功  
      const result = await this.$ajax.trademark.reqDeleteTrademark(id)
      if(result.code == 200){
        this.$message.success('删除数据成功')
        // 如果当前页的数据 都删除完了  应该显示上一页的数据  此时本地的数据还是有一条的，但是远程服务器里面的数据已经被删除了
        // 所有如果有一条的话 那么就再一次获取上一页的数据
        if(this.trademarkList.length == 1){
        
          this.page = this.page -1
          this.getTrademarkList()

        }else{
          this.getTrademarkList()
        }
      
      }else{
        this.$message.warning(result.messge)
      }
      // 再次更新列表数据   更新当前这页的数据
      this.getListToal()
      this.getTrademarkList()
      },
    
    

    },
    mounted(){
      // 获取品牌列表每一页的数据
      this.getTrademarkList()
      // 获取总共有多少条的数据
      this.getListToal()
    }
  }

</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
